<template>
  <div class="tinymce-editor">
    <editor v-model="myValue"
            :init="init"
            :disabled="disabled"
            @change="addressCall"
            @onClick="onClick">
    </editor>
  </div>
</template>
<script>
import Editor from '@tinymce/tinymce-vue' // 引入tinymce编辑器
import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入则不显示编辑器
import '../../public/tinymce/plugins/ax_wordlimit'
import 'tinymce/plugins/wordcount'// 字数统计
import 'tinymce/plugins/autoresize'// 编辑器大小自适应
// 字数限制
export default {
  components: {
    Editor
  },
  props: {
    // 传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: ''
    },
    // 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，
    // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到
    baseUrl: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'wordcount ax_wordlimit autolink autoresize'
    },
    toolbar: {
      type: [String, Array],
      default: 'ax_wordlimit'
    }
  },
  created () {},
  data () {
    return {
      // 初始化配置
      init: {
        language_url: `${this.baseUrl}/tinymce/langs/zh_CN.js`,
        language: 'zh_CN',
        skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`,
        content_css: `${this.baseUrl}/tinymce/skins/content/default/content.css`,
        max_height: 120,
        min_height: 115,
        // width: 705,
        autoresize_on_init: true, // 是否在初始化时就尝试自动调整大小。默认true启用此功能。
        autoresize_overflow_padding: 0, // 指定编辑器body初始化时两侧的距离，相当于padding-left加padding-right
        plugins: this.plugins,
        toolbar: this.toolbar,
        placeholder: '请开始你的表演',
        menubar: false, // 菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
        branding: false, // tiny技术支持信息是否显示
        // statusbar: false, // 最下方的元素路径和字数统计那一栏是否显示
        elementpath: false, // 元素路径是否显示
        content_style: 'img {width:40px;height:40px}', // 直接自定义可编辑区域的css样式
        // content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
        automatic_uploads: true, // 开关使用Data URL/Blob URL插入图片和文件到内容区的方式
        paste_data_images: true, // 图片是否可粘贴
        images_reuse_filename: true, // 不是每次随即生成一个新的文件名
        image_caption: true, // 在弹出框中增加一个“标题”选项，开启后图片将被包含在figure（HTML5新增）内。
        image_advtab: true, // 为图像属性编辑窗口添加高级属性，可以自定义图片的css样式（内置style）、边距（margin）和边框（border）。
        ax_wordlimit_num: 1000,
        // 超过字数后执行的回调函数，该函数可包含三个参数。
        // 参数1（object）：当前编辑器的引用。
        // 参数2（string）：过滤后的纯文字，可length后得到当前字数。
        // 参数3（number）：ax_wordlimit_num参数的值。
        ax_wordlimit_callback: function (editor, txt, num) {
          alert('当前字数：' + txt.length + '，限制字数：' + num)
        }
        // 需要绑定的事件类型，多个事件用空格分隔。
        // ax_wordlimit_event
        // 两次事件触发的间隔时间。1000毫秒=1秒。
        // ax_wordlimit_delay
      },
      myValue: this.value
    }
  },
  mounted () {
    tinymce.init({})
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick (e) {
      this.$emit('onClick', e, tinymce)
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear () {
      this.myValue = ''
    },
    uploadCall (msg) { // 回调方法，接收子组件传的参数
      this.myValue += msg
    },
    addressCall () {
    }
  },
  watch: {
    value (newValue) {
      this.myValue = newValue
    },
    myValue (newValue) {
      this.$emit('input', newValue)
    }
  }
}

</script>
<style scoped>
</style>
